JavaScript részletes bemutató

A JavaScript (JS) a weboldalak interaktivitásáért felel. Ezen az oldalon részletesen bemutatjuk a JS alapokat, változókat, függvényeket, feltételeket, ciklusokat, eseményeket, objektumokat, tömböket és a DOM manipulációt.

1. Alap JavaScript kód

<script>
console.log("Hello, világ!"); // Kiírja a szöveget a böngésző konzoljába
</script>

console.log() – a kódot a fejlesztői konzolba írja, nem a weboldalra.

2. Változók

let név = "Benedek";   // Módosítható változó
const év = 2025;        // Állandó, nem változtatható
var kor = 15;            // Régi típus, ma már ritkán használjuk

let – új változó létrehozása, később módosítható
const – állandó változó, nem lehet új értéket adni
var – régi változó, ma már inkább let-et használunk

3. Adattípusok

String: szöveg, pl. "Hello"
Number: szám, pl. 10, 3.14
Boolean: logikai érték, true vagy false
Array (tömb): lista, pl. [1, 2, 3]
Object (objektum): kulcs-érték pár, pl. { név: "Benedek", kor: 15 }

4. Függvények (function)

function koszones(név) {
    console.log("Szia " + név + "!"); // Kiírja a szöveget a konzolba
}

koszones("Benedek"); // Meghívja a függvényt, kiírja: Szia Benedek!

function – függvény létrehozása; paraméter a bemenet a függvénynek.

5. Feltételes utasítások

let életkor = 15;

if (életkor >= 18) {
    console.log("Felnőtt vagy.");
} else if (életkor >= 12) {
    console.log("Tini vagy.");
} else {
    console.log("Gyerek vagy.");
}

if – ha a feltétel igaz, végrehajtja a kódot
else if – másik feltétel
else – minden más esetben

6. Ciklusok

Ugyanazt a kódot többször futtatjuk:

for (let i = 0; i < 5; i++) {
    console.log("Szám: " + i); // 0-tól 4-ig írja ki a számokat
}

let j = 0;
while (j < 5) {
    console.log("Szám: " + j);
    j++;
}

for – ismétlődő feladat előre meghatározott számú alkalommal.
while – amíg a feltétel igaz, addig fut a kód.

7. Események

Interaktív elemek kezelése:

document.getElementById("gomb").addEventListener("click", function() {
    alert("Szia Benedek!"); // Felugró ablak a kattintáskor
});

getElementById() – kiválaszt egy HTML elemet az ID alapján
addEventListener() – esemény figyelése (pl. kattintás)
alert() – felugró üzenet megjelenítése

8. DOM manipuláció

HTML tartalom módosítása JavaScript segítségével:

Ez a szöveg változni fog.

document.getElementById("szoveg").innerText = "Új szöveg!";
document.getElementById("szoveg").innerHTML = "<strong>Félkövér szöveg</strong>";

innerText – csak szöveget ír
innerHTML – HTML-t is megadhatunk

9. Objektumok

let auto = {
    márka: "Tesla",
    év: 2025,
    indítás: function() {
        console.log(this.márka + " elindult!"); // this az objektumra hivatkozik
    }
};

auto.indítás(); // Tesla elindult!

10. Tömbök (Arrays)

let számok = [1, 2, 3, 4, 5];

számok.push(6);  // Új elem hozzáadása a tömbhöz
számok.pop();    // Utolsó elem eltávolítása
console.log(számok[0]); // Első elem: 1

11. Tippek kezdőknek

Mindig használj kommenteket: // egy soros vagy /* több soros */
Először tanulj változókat, függvényeket, majd feltételeket és ciklusokat
Gyakorold a DOM manipulációt és az eseménykezelést
Mentés után frissítsd a böngészőt, hogy lásd a változásokat

Weboldal programozás